const WIDTH = 50 // 默认宽度
const HEIGHT = 50 // 默认高度
const COLOR = '#31dca0' // 默认颜色

export const EType = {
  // 工厂实际配件
  Car: { alias: 'car', text: '小车', color: '#31dca0' },
  Export: { alias: 'export', text: '格口' },
  Entrance: { alias: 'entrance', text: '供包台' },
  Electrical: { alias: 'electrical', text: '方块' },
  Alarm: { alias: 'alarm', text: '急停' },
  Other: { alias: 'other', text: '其他设备' },

  // 以下为自定义
  Line: { alias: 'line', text: '线条' },
  RoundEdge: { alias: 'roundEdge', text: '直线' },
  SmoothEdge: { alias: 'smoothEdge', text: '曲线' },
  Document: { alias: 'document', text: '文字' },
}

// 分组选项
export const ETagOptions = Object.values(EType).reduce((acc, item) => {
  acc[item.alias] = Array.from({ length: 5 }, (_, i) => ({
    // value: `${item.alias}${i + 1}`,
    // label: `${item.alias}${i + 1}`,
    value: `${i + 1}`,
    label: `${i + 1}`,
  }));
  return acc;
}, {});

// 基础配置
export const genDefaultConfig = () => {
  return {
    car: {
      range: [0, 9],
      totalAngle: 0,
      rotate: 0,
      radian: 200,
      width: 50,
      height: 50,
      tag: '1',
    },
    export: {
      range: [0, 9],
      totalAngle: 0,
      rotate: 0,
      radian: 200,
      width: 50,
      height: 50,
      tag: '1',
    },
    entrance: {
      flip: false,
      index: 0,
      tag: '1',
      name: '供包台'
    },
    electrical: {
      index: 0,
      tag: '1',
      name: '方块',
    },
    roundEdge: {
      connector: 'rounded', // rounded：直线 smooth：曲线
      strokeWidth: 2,
      tag: '1',
      index: 0,
    },
    smoothEdge: {
      connector: 'smooth',
      strokeWidth: 2,
      tag: '1',
      index: 0,
    },
    document: {
      content: '文字',
      index: 0,
      tag: '1',
      size: 12,
    },
    line: {
      fill: '#31dca0',
      height: 2,
      tag: '1',
      index: 0,
    },
  };
};
/**
 * 创建蚊子
 * @param {Object} param0 参数
 * @param {Number} param0.index 标识
 * @param {String} param0.tag 分类
 * @param {String} param0.content 内容
 */

export const createDocument = (cell, { index, tag, content, size }) => {
  cell.attr('label/text', content);
  cell.attr('label/fontSize', size);
  cell.prop('data', {
    ...cell.getProp().data,
    index,
    tag,
    content,
    size
  });
}

/**
 * 创建边，用于包裹传送带
 * @param {Object} param0 参数
 * @param {Number} param0.x 起点X坐标
 * @param {Number} param0.y 起点Y坐标
 * @param {Number} param0.strokeWidth 线宽
 * @param {String} param0.connector 连接器 - rounded：直线 smooth：曲线
 */

export const createRoundEdge = ({ x = 40, y = 40, strokeWidth = 3, connector = 'smooth', index, tag }) => {
  return {
    source: { x, y },
    target: { x: x, y },
    connector,
    vertices: [
      { x: x, y: y + 40 },
      { x: x + 160, y: y + 40 },
      { x: x + 160, y },
    ],
    attrs: {
      line: {
        stroke: '#31dca0',
        strokeWidth: strokeWidth,
        // targetMarker: {
        //   fill: '#31dca0',
        //   name: 'circle',
        //   stroke: '#31dca0',
        //   r: strokeWidth + 4,
        //   refX: -strokeWidth - 4,
        // },
        targetMarker: null
        // 正方形
        // targetMarker: {
        //   width:strokeWidth + 10,
        //   height:strokeWidth + 10,
        //   fill: '#666666',
        //   name: 'diamond',
        //   offset: 2,
        //   stroke: '#666666'
        // },
      },
    },
    // tools:null
    tools: {
      name: 'vertices',
      args: {
        attrs: {
          fill: '#31dca0',
        },
        modifiers: 'ctrl',
      },
      snapRadius: 5,
      removeRedundancies: false,
    },
    data: {
      index,
      tag,
    }
  }
}


/**
 * 通过点击创建边
 * @param {Object} param0 参数
 * @param {Number} param0.x 起点X坐标
 * @param {Number} param0.y 起点Y坐标
 * @param {Number} param0.strokeWidth 线宽
 * @param {String} param0.connector 连接器 - rounded：直线 smooth：曲线
 */
export const mouseClickCreateRoundEdge = ({ source, target, strokeWidth = 3, connector = 'smooth' }) => {
  return {
    source,
    target,
    connector,
    // vertices: [
    //   { x: x, y: y + 40 },
    //   { x: x + 160, y: y + 40 },
    //   { x: x + 160, y },
    // ],
    attrs: {
      line: {
        stroke: '#31dca0',
        strokeWidth: strokeWidth,
        // targetMarker: {
        //   fill: '#31dca0',
        //   name: 'circle',
        //   stroke: '#31dca0',
        //   r: strokeWidth + 4,
        //   refX: -strokeWidth - 4,

        // },
        targetMarker: null

        // 正方形
        // targetMarker: {
        //   width:strokeWidth + 10,
        //   height:strokeWidth + 10,
        //   fill: '#666666',
        //   name: 'diamond',
        //   offset: 2,
        //   stroke: '#666666'
        // },
      },
    },
    tools: {
      name: 'vertices',
      args: {
        attrs: {
          fill: '#31dca0',
        },
        modifiers: 'ctrl',
      },
      snapRadius: 5,
      removeRedundancies: false,

    },
  }
}

/**
 * 创建元素属性和标记，用于生成小车和格口
 * @param {Object} cell 元素
 * @param {Object} param1 参数
 * @param {Array} param1.range 范围
 * @param {Number} param1.rotate 旋转角度
 * @param {Number} param1.totalAngle 弯曲角度
 * @param {Number} param1.radian 弧度
 * @param {Number} param1.width 宽度
 * @param {Number} param1.height 高度
 * @param {String} param1.fill 颜色
 */
export const createAttrsAndMarkup = (cell, { start, end, totalAngle = 0, rotate = 0, radian = 200, width = WIDTH, height = HEIGHT, fill = COLOR, tag }) => {
  const numElements = +end - +start;
  const radius = 33 * numElements; // 旋转半径
  // const radian = 200; // 旋转弧度
  const angleStep = totalAngle / (numElements - 1); // 每个元素的角度增量

  let index = +start;
  let attrs = {
    body: {
      strokeWidth: 1,
      stroke: '#000',
      fill,
      width,
      height,
    },
    text: {
      fontSize: 12,
      fill: '#262626',
      textAnchor: 'middle', // 水平居中
      dominantBaseline: 'middle', // 垂直居中
      text: start
    },
  };

  let markup = [{
    tagName: 'rect',
    selector: 'body',
  },
  {
    tagName: 'text',
    selector: 'text',
  }];


  cell.setAttrs(attrs)
  cell.setMarkup(markup)
  // console.log(cell.getAttrs())
  for (let i = 0; i < numElements; i++) {
    if (totalAngle != 0) {
      const angle = angleStep * i; // 当前元素的角度
      const rad = angle * Math.PI / radian; // 转换为弧度

      attrs[`body${index}`] = {
        strokeWidth: 1,
        stroke: '#000',
        fill,
        width,
        height,
        refX: radius * Math.cos(rad) - radius, // X坐标
        refY: radius * Math.sin(rad) + width, // Y坐标
        transform: `rotate(${angle})`, // 旋转角度
      };

      attrs[`text${index}`] = {
        fontSize: 12,
        fill: '#262626',
        textAnchor: 'middle',
        dominantBaseline: 'middle',
        transform: `rotate(${angle})`, // 旋转角度
        text: index + 1,
        refX: (radius + 25) * Math.cos(rad) - radius, // 调整文本的X坐标
        refY: (radius + 25) * Math.sin(rad) + width, // 调整文本的Y坐标，使其向下偏移一半文本高度
      };

    } else {
      attrs[`body${index}`] = {
        strokeWidth: 1,
        stroke: '#000',
        fill,
        width,
        height,
        refX: `${width * (i + 1)}`,
        refY: 0,
        transform: `rotate(0)`,
      };
      attrs[`text${index}`] = {
        fontSize: 12,
        fill: '#262626',
        textAnchor: 'middle',
        dominantBaseline: 'middle',
        text: index + 1,
        refX: `${100 * (i + 1) + 50}%`,
        refY: 0.4,
        textAnchor: 'middle',
      };
    }


    markup.push({
      tagName: 'rect',
      selector: `body${index}`,
    });

    markup.push({
      tagName: 'text',
      selector: `text${index}`,
    });
    index++;
  }
  cell.setProp('size', {
    width, height
  }
  )

  cell.setAttrs(attrs)
    .setMarkup(markup)
    .setProp('angle', rotate - totalAngle)
    .setProp('data', {
      ...cell.getProp().data,
      tag,
      totalAngle,
      start,
      end,
      rotate,
      radian,
      width,
      height,
      fill,
    });
  return cell.getProp()
};



/**
 * 创建元素属性和标记，用于生成供包台
 * @param {Object} cell 元素
 * @param {Object} param1 参数
 * @param {Array} param1.index 索引

 */
export const createAttrsAndMarkupForEntrance = (cell, { index, name, tag }) => {
  const attrs = cell.getAttrs();
  cell.prop('data', {
    ...cell.getProp().data,
    index,
    tag,
    name,
  })
  if (index == 0) {
    return cell.updateAttrs({ text: { ...attrs.text, text: name + index } })
  }

  cell.updateAttrs({
    'text': {
      ...attrs.text,
      text: name + index
    },
    'body': attrs.body,
    'body1': attrs.body1,
  })
  const markup = [
    // 确保text在后面渲染
    {
      "tagName": "polygon",
      "selector": "polygon"
    },
    {
      "tagName": "rect",
      "selector": "body"
    },
    {
      tagName: 'rect',
      selector: `body1`,
    },
    {
      tagName: 'text',
      selector: `text`,
    },
  ]
  cell.setMarkup(markup)
}
/**
 * 创建元素属性和标记，用于生成电机
 * @param {Object} cell 元素
 * @param {Object} param1 参数
 * @param {Array} param1.index 索引

 */
export const createAttrsAndMarkupForElectrical = (cell, { index, name, tag }) => {
  const attrs = cell.getAttrs();
  cell.prop('data', {
    ...cell.getProp().data,
    index,
    tag,
    name,
  })
  if (index == 0) {
    return cell.updateAttrs({ text: { ...attrs.text, text: name + index } })
  }

  cell.updateAttrs({
    'text': {
      ...attrs.text,
      text: name + index
    },
    'body': {
      ...attrs.body,
    },
  })

  // cell.setMarkup(markup)
}
